<template>
  <div>
    <!--下拉菜单-->
    <van-dropdown-menu>
      <van-dropdown-item title="综合" disabled/>
      <van-dropdown-item title="价格" @change="priceChange" v-model="priceVal" :options="option2" />
      <van-dropdown-item title="分类" @change="categoryChange" v-model="categoryVal" :options="filterCategory" />
    </van-dropdown-menu>
    <!--产品列表组件-->
    <Products v-if="goodsList.length != 0" :goodsList="goodsList" :filterCategory="filterCategory"/>

    <!--没有搜索到商品时展示的组件-->
    <ProductsNotShow v-else/>
  </div>
</template>

<script>
  import Products from "./Products";
  import ProductsNotShow from "./ProductsNotShow";
  export default {
    name: "SearchProducts",
    components: {ProductsNotShow, Products},
    props: {
      goodsList: {
        type: Array
      },
      // 这个是从SearchPopup组件中传过来的，其中穿过了Products组件
      filterCategory: {
        type: Array
      }
    },

    beforeUpdate() {
      // 页面更新完毕，遍历filterCategory数组，看看哪一项为true，就给vant的下拉选择框组件赋值
      this.filterCategory.map(item => {
        if(item.checked) {
          this.categoryVal = item.value
          return
        }
      })
    },
    data() {
      return {
        categoryVal: '',
        priceVal: '',
        option2: [
          { text: '价格由高到低', value: 'desc' },
          { text: '价格由低到高', value: 'asc' },
        ],
      }
    },
    methods: {
      categoryChange(value) {
        this.$emit('categoryChange', value)
      },
      priceChange(value) {
        this.$emit('priceChange', value)
      }
    }
  }
</script>

<style scoped>

</style>